<script type="text/javascript">
var paginationTotal = 1;//记录总数
$(document).ready(function(){
	initData(0);
	window.parent.$(".dialogIframe").dialog( "option", 
		"buttons", {			
			"Close": function() { 
				window.parent.$(".dialogIframe").dialog("close");
			}
		}).width(650).height(450);
});

function usageDetail(){
    initData(0);
}

function loadData(page,pageSize){
	pu_id = $("#searchForm [name=pu_id]").val();
    type = $("#searchForm [name=type]").val();
    ref_id = $("#searchForm [name=ref_id]").val();
    $.ajax({
        type: "POST",
        async: false,
        dataType: "json",
        url: "/merchant/plan/plan-usage-detail",
        data:{
            'page':page,
            'pageSize':pageSize,
            'pu_id':pu_id,
            'type':type,
            'ref_id':ref_id
         },
        success: function(json) {
        	var html ='';
        	if(json.ask==1){            	
            	paginationTotal = json.total;
            	if (typeof json.result == 'undefined') return;
            	$.each(json.result,function(k,v){
                	html +='<div class="row height25">';
                	html +='<div class="cell " style="width:18%" >'+v.customer_id+'</div>';
                	html +='<div class="cell " style="width:18%" >'+v.type+'</div>';
                	html +='<div class="cell " style="width:15%" >'+v.ref_id+'</div>';
                	html +='<div class="cell " style="width:13%" >'+v.count+'</div>';
                	html +='<div class="cell " style="width:16%" >'+v.current_count+'</div>';
					html +='<div class="cell2 " style="width:20%;border-right:0 none;background: url("") repeat-y right top;background-image: url("");background-repeat-x: no-repeat;background-repeat-y: repeat;background-attachment: initial;background-position-x: 100%;background-position-y: 0%;background-origin: initial;background-clip: initial;background-color: initial;" >'+v.created+'</div>';
                	html +="</div>";
            	});
            	
         	}else{
         		paginationTotal = json.total;
         		html +='<div class="row height25" style="text-align:center;"> No Result.</div>';
         	}
         	$("#tab-div").html(html);
      	}
    });
}

</script>
<style>
  .cell2 {
    background: url("") repeat-y scroll right top transparent;
    float: left;
    height: 25px;
    line-height: 25px;
    overflow: hidden;
    text-align: center;
 }

</style>

<div id="iTitle" style="margin-bottom:4px;">
	<div id="iTitleSub">
		<form id="searchForm" name="searchForm" >
		<div>
		<label>
		Type:
        <select name="type" id="type">
        	<option value="">All</option>
        	<{foreach item=item key=key from=$typeArr}>
        		<option value="<{$item}>"><{$item}></option>
        	<{/foreach}>
        </select>
		</label>&nbsp;
        <label>
        <label>
		Ref_id:
        <input  class="inputText" style="width:100px" type="text" name="ref_id">
        <input type="hidden" name="pu_id" value="<{$pu_id}>" />
		</label>&nbsp;
		<span class="button-2" onclick="usageDetail()">Search</span>
        </div>
		</form>
	</div>
	<div id="tipmsg"></div>
</div>

<div class="row height25 row-header">
	<div class="cell sort" style="width:18%">customer_id</div>
	<div class="cell sort" style="width:18%">type</div>
	<div class="cell sort" style="width:15%">ref_id</div>
	<div class="cell sort" style="width:13%">count</div>
	<div class="cell sort" style="width:16%">current_count</div>
	<div class="cell no-background" style="width:20%">created</div>
</div>

<div class="tab-div" id="tab-div">	</div>

<div class="pagination"></div>